<template>
    <div id="Find">
        <div id="banner">
            <div id='banner_scroll'>
                <div class='myBannerType' id='banner1'></div>
                <div class='myBannerType' id='banner2'></div>
                <div class='myBannerType' id='banner3'></div>
            </div>
            <div id="swiper_bullet">
                <span class='[bullet, { bullet_active: isActive1 }]'></span>
                <span class='[bullet, { bullet_active: isActive2 }]'></span>
                <span class='[bullet, { bullet_active: isActive3 }]'></span>
            </div>
            <div class='oBtnBanner' id="banner_left"></div>
            <div class='oBtnBanner' id="banner_right"></div>
        </div>
        <div id="dynamic_state">
            <div id="block001">
                <div id="myDynamic">

                    <el-col :span="8">
                        <el-menu default-active="1" class="el-menu-vertical-demo" style="background:#FFFFFF;">
                            <el-menu-item index="1" @click="myRouter('/find')"><i class="el-icon-loading"></i>最新动态</el-menu-item>
                            <el-menu-item index="2" @click="myRouter('/find/me')"><i class="el-icon-star-off"></i>我的动态</el-menu-item>
                            <!--<el-menu-item index="3" @click="myRouter('/find/rate')"><i class="el-icon-d-caret"></i>爱心排行板</el-menu-item>-->
                        </el-menu>
                    </el-col>

                </div>
            </div>
            <div id="myState">
                <Input v-model="myContent.content" type="textarea" :autosize="{minRows: 10,maxRows: 10}" placeholder="请输入..." style="height:170px;"></Input>
                <div id="myPublish">
                    <Button id="oBtnPublish" type="dashed" @click="sentInfo">发布</Button>

                    <Icon id="oBtnPic" color="#ccc" size="30" type="image"></Icon>
                    <Icon id="oBtnFace" color="#ccc" size="30" type="happy-outline"></Icon>
                </div>
            </div>
        </div>
        <div id="discuss" class=" clearfix">
            <router-view></router-view>
        </div>
    </div>
</template>
<script>
    import Mock from 'mockjs'
    import {
        mapState,
        mapMutations
    } from 'vuex'
    export default {
        data() {
            return {
                isActive1: true,
                isActive2: false,
                isActive3: false,
                myContent: {
                    id: Mock.Random.guid(),
                    name: "",
                    content: "",
                    img: [
                        Mock.Random.image('300x250', '#02adea', 'Hello'),
                        Mock.Random.image('300x600', '#02adea', 'world'),
                        Mock.Random.image('120x60', '#fb0a2a'),
                        Mock.Random.image('300x250', '#02adea', 'Add'),
                    ],
                    like: Mock.Random.natural(0, 100000),
                    rate: Mock.Random.natural(0, 10),
                    date: "",
                    discuss: []
                },
                theme3: 'light',
                name: ""
            }
        },
        methods: {
            my_like: function (index, like) {
                this.badge_visited[index] = this.$set(this.badge_visited, index, !this.badge_visited[index]);
            },
            myRouter(path) {
                if (path == "/find/me") {
                    this.$store.commit('update_me')
                }
                if (path == "/find") {
                    this.$store.commit('update_comment')
                }
            },
            ...mapMutations([
                'addComment'
            ]),
            sentInfo() {
                if (this.isLogined && this.user) {
                if (this.myContent.content) {
                    var myDate = new Date();
                    var date = myDate.toLocaleString();
                    this.myContent.name = this.user;
                    this.myContent.date = date;
                    var data = this.myContent;
                    this.myContent = {
                        id: Mock.Random.guid(),
                        name: Mock.Random.cname(),
                        content: "",
                        img: [
                            Mock.Random.image('300x250', '#02adea', 'Hello'),
                            Mock.Random.image('300x600', '#02adea', 'world'),
                            Mock.Random.image('120x60', '#fb0a2a'),
                            Mock.Random.image('300x250', '#02adea', 'Add'),
                        ],
                        like: Mock.Random.natural(0, 100000),
                        rate: Mock.Random.natural(0, 10),
                        data: "",
                        discuss: []
                    }
                    this.addComment(data);
                } else {
                    this.$Notice.open({
                        title: '操作提示',
                        desc: '请输入文本后再发布'
                    });
                }
                } else {
                    this.$Notice.open({
                        title: '操作提示',
                        desc: '只有登录的用户能够发布内容'
                    });
                }


            }
        },
        computed: {
            ...mapState({
                user: state => state.user,
                isLogined: state => state.isLogined
            })
        },
        mounted() {
            //for (var i = 0; i <= comment_data.result.length; i++) {
            //   this.badge_visited[i] = false
            //}
        }
    }
</script>
<style scoped>
    #banner {
        background: #ccc;
        width: 870px;
        position: relative;
        margin: 0 auto;
        overflow: hidden;
    }

    .el-menu {
        border-radius: 2px;
        list-style: none;
        position: relative;
        margin: 0;
        padding-left: 0;
        background-color: #eef1f6;
        width: 150px;
    }

    .oBtnBanner {
        display: none;
    }

    #swiper_bullet {
        width: 100%;
        position: absolute;
        left: 0px;
        bottom: 0px;
        text-align: center;
    }

    #bullet_pos {
        display: block;
        position: relative;
        margin: 0 auto;
    }

    .bullet {
        width: 8px;
        height: 8px;
        display: inline-block;
        border-radius: 100%;
        background: #000;
        opacity: 0.2;
        margin: 0 5px;
    }

    .bullet_active {
        opacity: 1;
        background: #007aff;
    }

    #banner_left {
        background: url(../assets/images/find/u14.png);
        height: 429px;
        width: 45px;
        position: absolute;
        left: 0px;
        top: 0px;
    }

    #banner_right {
        background: url(../assets/images/find/u19.png);
        height: 429px;
        width: 45px;
        position: absolute;
        right: 0px;
        top: 0px;
    }

    #banner_scroll {
        width: 2610px;
        height: 429px;
        position: relative;
        left: 0px;
        right: 0px;
    }

    #banner1 {
        background: url(../assets/images/find/u5.png);
        width: 870px;
        height: 429px;
        float: left;
    }

    #banner2 {
        background: url(../assets/images/find/u7.png);
        width: 870px;
        height: 429px;
        float: left;
    }

    #banner3 {
        background: url(../assets/images/find/u9.png);
        width: 870px;
        height: 429px;
        float: left;
    }

    #dynamic_state {
        width: 870px;
        height: 300px;
        background: #FAFAFA;
        position: relative;
        margin: 0 auto;
    }

    #myDynamic {
        width: 150px;
        background: white;
        position: absolute;
        text-align: center;
        left: 0px;
        top: 0px;
        margin: 50px 40px;
        font-size: 15px;
    }

    #myDynamic a:link {
        text-decoration: none;
    }

    #myDynamic a:visited {

        text-decoration: none;
    }

    #myDynamic a:hover {

        text-decoration: none;
    }

    #myDynamic a:active {
        color: #3399FF;
        text-decoration: none;
    }

    .Dynamic_Img {
        height: 18px;
        position: relative;
        margin: 10px auto;
        cursor: pointer;
        text-decoration: none;
        border-bottom: 1px solid #ccc;
        /* #ccc换成链接的颜色 */
        padding-bottom: 10px;
        /*这里设置你要空的距离*/
    }


    #myState {
        width: 500px;
        height: 220px;
        position: absolute;
        right: 0px;
        top: 0px;
        margin: 30px 100px;
    }

    #myPublish {
        height: 40px;
        width: 500px;
        position: relative;
    }

    #oBtnPublish {
        position: absolute;
        right: 0px;
        width: 98px;
        background: #fff;
        background-position: -116px 0px;
        margin-right: 20px;
        border-radius: 3px;
        cursor: pointer;
        padding-top: 7px;
        color: #647080;
        font-size: 15px;
    }

    #oBtnPublish:hover {
        background: #3385FF;
        color: white;
    }

    #oBtnPic {
        position: absolute;
        right: 108px;
        top: 0px;
        padding-top: 4px;
        width: 40px;
        height: 40px;

        background-position: -53px 0px;
        margin-right: 20px;
        cursor: pointer;
    }

    #oBtnFace {
        position: absolute;
        right: 155px;
        top: 0px;
        padding-top: 4px;
        width: 30px;
        height: 40px;
        background-position: 0px 0px;
        margin-right: 20px;
        cursor: pointer;
    }

    #discuss {
        width: 870px;
        position: relative;
        /*background: greenyellow;*/
        background: #FAFAFA;
        margin: 0 auto;
        padding-bottom: 20px;
    }
</style>